<template>
  <view class="work-order-detail-container">
    <!-- 工单基本信息卡片 -->
    <view class="basic-info-card">
      <view class="card-header">
        <text class="card-title">工单信息</text>
        <view class="order-status"
          :class="getStatusClass(workOrder.status)"
        >
          {{ getStatusText(workOrder.status) }}
        </view>
      </view>

      <view class="order-info">
        <view class="info-item">
          <text class="info-label">工单编号：</text>
          <text class="info-value">{{ workOrder.id }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">工单类型：</text>
          <text class="info-value">{{ workOrder.type }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">优先级：</text>
          <view class="priority-info">
            <view class="priority-badge" :class="workOrder.priority"></view>
            <text class="priority-text">{{ getPriorityText(workOrder.priority) }}</text>
          </view>
        </view>
        <view class="info-item">
          <text class="info-label">创建时间：</text>
          <text class="info-value">{{ workOrder.createTime }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">预计工时：</text>
          <text class="info-value">{{ workOrder.estimatedTime }}</text>
        </view>
      </view>
    </view>

    <!-- 设备信息卡片 -->
    <view class="device-info-card">
      <view class="card-header">
        <text class="card-title">设备信息</text>
      </view>

      <view class="device-details">
        <view class="device-name">
          <text class="device-icon">🏠</text>
          <text class="name">{{ workOrder.deviceName }}</text>
        </view>
        <view class="device-location">
          <text class="location-icon">📍</text>
          <text class="location">{{ workOrder.deviceLocation }}</text>
        </view>
      </view>
    </view>

    <!-- 问题描述卡片 -->
    <view class="description-card">
      <view class="card-header">
        <text class="card-title">问题描述</text>
      </view>
      <text class="description-text">{{ workOrder.description }}</text>
    </view>

    <!-- 日常检查卡片 -->
    <view v-if="workOrder.type === '日常巡检'" class="inspection-card">
      <view class="card-header">
        <text class="card-title">检查记录</text>
        <view v-if="workOrder.status === 'pending'" class="inspection-actions">
          <text class="action-btn" @click="startInspection">开始检查</text>
        </view>
      </view>

      <!-- 检查项列表 -->
      <view class="inspection-items">
        <view
          v-for="item in inspectionItems"
          :key="item.id"
          class="inspection-item"
          :class="{ completed: item.completed }"
        >
          <view class="item-header">
            <text class="item-name">{{ item.name }}</text>
            <view class="item-status" :class="item.status"></view>
          </view>
          <text class="item-desc">{{ item.description }}</text>
          <view v-if="item.completed" class="item-result">
            <text class="result-text">检查结果：{{ item.result }}</text>
            <text v-if="item.notes" class="result-note">备注：{{ item.notes }}</text>
          </view>
        </view>
      </view>

      <!-- 检查总结 -->
      <view v-if="inspectionCompleted" class="inspection-summary">
        <view class="summary-header">
          <text class="summary-title">检查总结</text>
          <text class="summary-time">完成时间：{{ inspectionSummary.completeTime }}</text>
        </view>
        <view class="summary-stats">
          <view class="stat-item">
            <text class="stat-label">检查项：</text>
            <text class="stat-value">{{ inspectionSummary.totalItems }}项</text>
          </view>
          <view class="stat-item">
            <text class="stat-label">正常：</text>
            <text class="stat-value normal">{{ inspectionSummary.normalItems }}项</text>
          </view>
          <view class="stat-item">
            <text class="stat-label">异常：</text>
            <text class="stat-value abnormal">{{ inspectionSummary.abnormalItems }}项</text>
          </view>
        </view>
        <view v-if="inspectionSummary.hasIssues" class="issues-list">
          <text class="issues-title">发现的问题：</text>
          <view v-for="issue in inspectionSummary.issues" :key="issue" class="issue-item">
            <text class="issue-text">• {{ issue }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 处理记录卡片 -->
    <view v-if="workOrder.status !== 'pending'" class="process-card">
      <view class="card-header">
        <text class="card-title">处理记录</text>
      </view>

      <view class="process-timeline">
        <view
          v-for="(record, index) in processRecords"
          :key="index"
          class="timeline-item"
          :class="{ active: index === 0 }"
        >
          <view class="timeline-dot"></view>
          <view class="timeline-content">
            <text class="record-time">{{ record.time }}</text>
            <text class="record-action">{{ record.action }}</text>
            <text v-if="record.operator" class="record-operator">操作人：{{ record.operator }}</text>
            <text v-if="record.notes" class="record-notes">备注：{{ record.notes }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 处理详情卡片 -->
    <view v-if="workOrderProcessStore.currentProcess" class="processing-detail-card">
      <view class="card-header">
        <text class="card-title">🔧 处理详情</text>
      </view>

      <view class="processing-info">
        <view class="info-row">
          <text class="info-label">处理时间：</text>
          <text class="info-value">{{ workOrderProcessStore.currentProcess.startTime }}</text>
        </view>
        <view v-if="workOrderProcessStore.currentProcess.endTime" class="info-row">
          <text class="info-label">完成时间：</text>
          <text class="info-value">{{ workOrderProcessStore.currentProcess.endTime }}</text>
        </view>
      </view>

      <view class="processing-description">
        <text class="description-title">处理描述：</text>
        <text class="description-content">{{ workOrderProcessStore.currentProcess.description }}</text>
      </view>

      <view v-if="workOrderProcessStore.currentProcess.photos.length > 0" class="processing-photos">
        <text class="photos-title">处理照片：</text>
        <view class="photos-grid">
          <view
            v-for="(photo, index) in workOrderProcessStore.currentProcess.photos"
            :key="index"
            class="photo-item"
            @click="previewPhoto(workOrderProcessStore.currentProcess.photos, index)"
          >
            <image :src="photo" class="photo-preview" mode="aspectFill"></image>
          </view>
        </view>
      </view>

      <view v-if="workOrderProcessStore.currentProcess.materialsUsed?.length" class="additional-info">
        <text class="info-title">使用材料：</text>
        <text class="info-content">{{ workOrderProcessStore.currentProcess.materialsUsed.join(', ') }}</text>
      </view>

      <view v-if="workOrderProcessStore.currentProcess.issuesFound?.length" class="additional-info">
        <text class="info-title">发现问题：</text>
        <text class="info-content">{{ workOrderProcessStore.currentProcess.issuesFound.join(', ') }}</text>
      </view>

      <view v-if="workOrderProcessStore.currentProcess.recommendations?.length" class="additional-info">
        <text class="info-title">维护建议：</text>
        <text class="info-content">{{ workOrderProcessStore.currentProcess.recommendations.join(', ') }}</text>
      </view>
    </view>

    <!-- 客户评价卡片 -->
    <view v-if="workOrder.status === 'completed'" class="client-review-card">
      <view class="card-header">
        <text class="card-title">⭐ 客户评价</text>
        <text v-if="averageRating > 0" class="rating-score">{{ averageRating }}分</text>
      </view>

      <view v-if="workOrderReviews.length === 0" class="no-reviews">
        <text class="no-reviews-text">暂无客户评价</text>
        <button class="btn btn-primary" @click="addClientReview">
          <text class="btn-icon">⭐</text>
          <text>添加评价</text>
        </button>
      </view>

      <view v-else class="reviews-list">
        <view
          v-for="review in workOrderReviews"
          :key="review.createdAt"
          class="review-item"
        >
          <view class="review-header">
            <view class="reviewer-info">
              <text class="reviewer-name">{{ review.clientName }}</text>
              <text class="review-time">{{ review.createdAt }}</text>
            </view>
            <view class="review-rating">
              <text v-for="star in 5" :key="star" class="star"
                    :class="{ filled: star <= review.rating }">⭐</text>
            </view>
          </view>
          <text class="review-comment">{{ review.comment }}</text>
          <view v-if="review.photos?.length" class="review-photos">
            <view
              v-for="(photo, index) in review.photos"
              :key="index"
              class="review-photo-item"
              @click="previewPhoto(review.photos, index)"
            >
              <image :src="photo" class="review-photo" mode="aspectFill"></image>
            </view>
          </view>
        </view>

        <view class="add-review-section">
          <button class="btn btn-secondary" @click="addClientReview">
            <text class="btn-icon">⭐</text>
            <text>添加评价</text>
          </button>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button
        v-if="workOrder.status === 'pending'"
        class="btn btn-primary"
        @click="startProcessing"
      >
        <text class="btn-icon">🚀</text>
        <text>开始处理</text>
      </button>

      <button
        v-if="workOrder.status === 'in_progress'"
        class="btn btn-success"
        @click="completeWorkOrder"
      >
        <text class="btn-icon">✅</text>
        <text>完成工单</text>
      </button>

      <button
        v-if="workOrder.status === 'in_progress'"
        class="btn btn-secondary"
        @click="addProcessRecord"
      >
        <text class="btn-icon">📝</text>
        <text>添加记录</text>
      </button>

      <button
        v-if="workOrder.status !== 'completed' && workOrder.status !== 'cancelled'"
        class="btn btn-warning"
        @click="cancelWorkOrder"
      >
        <text class="btn-icon">❌</text>
        <text>取消工单</text>
      </button>

      <button
        class="btn btn-secondary"
        @click="editWorkOrder"
      >
        <text class="btn-icon">✏️</text>
        <text>编辑工单</text>
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useWorkOrderProcessStore } from '@/stores/work-order-process'

// 页面参数
const workOrderId = ref('')

// 工单处理存储
const workOrderProcessStore = useWorkOrderProcessStore()

// 计算属性 - 客户评价
const workOrderReviews = computed(() =>
  workOrderProcessStore.getWorkOrderReviews(workOrderId.value)
)

const averageRating = computed(() =>
  workOrderProcessStore.getAverageRating(workOrderId.value)
)

// 工单基本信息
const workOrder = ref({
  id: 'WO-20240115001',
  type: '日常巡检',
  description: '对移动厕所-001进行日常巡检，检查各项设备运行状态和清洁情况',
  deviceName: '移动厕所-001',
  deviceLocation: '人民广场东侧',
  status: 'pending',
  priority: 'medium',
  createTime: '2024-01-15 09:30',
  estimatedTime: '30分钟',
  assignee: '张师傅'
})

// 检查项数据 (日常巡检专用)
const inspectionItems = ref([
  {
    id: 1,
    name: '外观清洁度检查',
    description: '检查设备外观是否清洁，无明显污渍',
    completed: true,
    status: 'normal',
    result: '正常',
    notes: ''
  },
  {
    id: 2,
    name: '门锁功能检查',
    description: '检查门锁是否正常开启和关闭',
    completed: true,
    status: 'normal',
    result: '正常',
    notes: ''
  },
  {
    id: 3,
    name: '照明系统检查',
    description: '检查内部照明是否正常亮起',
    completed: true,
    status: 'warning',
    result: '灯泡亮度不足',
    notes: '建议更换灯泡'
  },
  {
    id: 4,
    name: '洗手液余量检查',
    description: '检查洗手液分配器余量',
    completed: false,
    status: 'pending',
    result: '',
    notes: ''
  },
  {
    id: 5,
    name: '纸巾余量检查',
    description: '检查纸巾分配器余量',
    completed: false,
    status: 'pending',
    result: '',
    notes: ''
  },
  {
    id: 6,
    name: '水箱水位检查',
    description: '检查水箱水位是否正常',
    completed: false,
    status: 'pending',
    result: '',
    notes: ''
  },
  {
    id: 7,
    name: '异味检测',
    description: '检查内部是否有异常异味',
    completed: false,
    status: 'pending',
    result: '',
    notes: ''
  },
  {
    id: 8,
    name: '地面清洁度',
    description: '检查地面是否清洁干燥',
    completed: false,
    status: 'pending',
    result: '',
    notes: ''
  }
])

// 检查是否完成
const inspectionCompleted = computed(() => {
  return inspectionItems.value.every(item => item.completed)
})

// 检查总结
const inspectionSummary = computed(() => {
  const totalItems = inspectionItems.value.length
  const normalItems = inspectionItems.value.filter(item => item.status === 'normal').length
  const abnormalItems = inspectionItems.value.filter(item => item.status === 'warning' || item.status === 'error').length
  const issues = inspectionItems.value
    .filter(item => item.status === 'warning' || item.status === 'error')
    .map(item => `${item.name}: ${item.result}`)

  return {
    totalItems,
    normalItems,
    abnormalItems,
    hasIssues: issues.length > 0,
    issues,
    completeTime: '2024-01-15 10:45:00'
  }
})

// 处理记录
const processRecords = ref([
  {
    time: '2024-01-15 09:30',
    action: '工单创建',
    operator: '管理员',
    notes: '创建日常巡检工单'
  },
  {
    time: '2024-01-15 09:35',
    action: '工单分配',
    operator: '管理员',
    notes: '分配给张师傅处理'
  }
])

// 获取状态样式类
const getStatusClass = (status: string) => {
  const statusMap: Record<string, string> = {
    pending: 'status-pending',
    assigned: 'status-assigned',
    in_progress: 'status-in-progress',
    on_hold: 'status-on-hold',
    completed: 'status-completed',
    cancelled: 'status-cancelled'
  }
  return statusMap[status] || 'status-pending'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    pending: '待处理',
    assigned: '已分配',
    in_progress: '进行中',
    on_hold: '暂停',
    completed: '已完成',
    cancelled: '已取消'
  }
  return statusMap[status] || '未知'
}

// 获取优先级文本
const getPriorityText = (priority: string) => {
  const priorityMap: Record<string, string> = {
    urgent: '紧急',
    high: '高',
    medium: '中',
    low: '低'
  }
  return priorityMap[priority] || '未知'
}

// 开始检查
const startInspection = () => {
  uni.showModal({
    title: '开始检查',
    content: '确定要开始日常巡检吗？',
    success: (res) => {
      if (res.confirm) {
        uni.navigateTo({
          url: `/pages/work-orders/inspection?orderId=${workOrderId.value}`
        })
      }
    }
  })
}

// 开始处理
const startProcessing = () => {
  uni.showModal({
    title: '开始处理',
    content: '确定要开始处理此工单吗？',
    success: (res) => {
      if (res.confirm) {
        // 调用API更新状态为进行中
        uni.showLoading({ title: '处理中...' })
        setTimeout(() => {
          uni.hideLoading()
          workOrder.value.status = 'in_progress'
          processRecords.value.unshift({
            time: new Date().toLocaleString('zh-CN'),
            action: '开始处理',
            operator: '当前用户',
            notes: '开始处理工单'
          })
          uni.showToast({
            title: '开始处理成功',
            icon: 'success'
          })
        }, 1500)
      }
    }
  })
}

// 完成工单 - 跳转到处理页面
const completeWorkOrder = () => {
  uni.navigateTo({
    url: `/pages/work-orders/process?id=${workOrderId.value}`
  })
}

// 添加处理记录
const addProcessRecord = () => {
  uni.showModal({
    title: '添加处理记录',
    content: '请输入处理记录内容',
    editable: true,
    placeholderText: '请输入处理记录...',
    success: (res) => {
      if (res.confirm && res.content) {
        processRecords.value.unshift({
          time: new Date().toLocaleString('zh-CN'),
          action: '处理记录',
          operator: '当前用户',
          notes: res.content
        })
        uni.showToast({
          title: '记录添加成功',
          icon: 'success'
        })
      }
    }
  })
}

// 取消工单
const cancelWorkOrder = () => {
  uni.showModal({
    title: '取消工单',
    content: '确定要取消此工单吗？取消后无法恢复。',
    success: (res) => {
      if (res.confirm) {
        // 调用API更新状态为已取消
        uni.showLoading({ title: '处理中...' })
        setTimeout(() => {
          uni.hideLoading()
          workOrder.value.status = 'cancelled'
          processRecords.value.unshift({
            time: new Date().toLocaleString('zh-CN'),
            action: '取消工单',
            operator: '当前用户',
            notes: '工单被取消'
          })
          uni.showToast({
            title: '工单已取消',
            icon: 'success'
          })
        }, 1500)
      }
    }
  })
}

// 编辑工单
const editWorkOrder = () => {
  uni.navigateTo({
    url: `/pages/work-orders/edit?id=${workOrderId.value}`
  })
}

// 添加客户评价
const addClientReview = () => {
  uni.navigateTo({
    url: `/pages/work-orders/review?id=${workOrderId.value}`
  })
}

// 预览照片
const previewPhoto = (photos: string[], index: number) => {
  uni.previewImage({
    urls: photos,
    current: index
  })
}

// 页面加载
onLoad((options) => {
  if (options?.id) {
    workOrderId.value = options.id
    console.log('工单详情页面，工单ID:', workOrderId.value)
  }
})

// 页面挂载
onMounted(() => {
  console.log('工单详情页面加载')
  // 这里可以调用API获取工单详情
})
</script>

<style lang="scss" scoped>
.work-order-detail-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f6ffed 0%, #e6f7ff 100%);
  padding: 24rpx;
  padding-bottom: 40rpx;
}

// 通用卡片样式
.basic-info-card,
.device-info-card,
.description-card,
.inspection-card,
.process-card {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .card-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
}

// 工单基本信息卡片
.basic-info-card {
  .order-status {
    padding: 8rpx 16rpx;
    border-radius: 16rpx;
    font-size: 24rpx;
    font-weight: 500;

    &.status-pending {
      background: #fff7e6;
      color: #faad14;
    }

    &.status-assigned {
      background: #e6f7ff;
      color: #1890ff;
    }

    &.status-in-progress {
      background: #f6ffed;
      color: #52c41a;
    }

    &.status-on-hold {
      background: #f5f5f5;
      color: #999;
    }

    &.status-completed {
      background: #f6ffed;
      color: #52c41a;
    }

    &.status-cancelled {
      background: #fff1f0;
      color: #ff4d4f;
    }
  }

  .order-info {
    margin-bottom: 24rpx;

    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16rpx 0;
      border-bottom: 1rpx solid #f8f9fa;

      &:last-child {
        border-bottom: none;
      }

      .info-label {
        font-size: 28rpx;
        color: #666;
        font-weight: 500;
      }

      .info-value {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
      }

      .priority-info {
        display: flex;
        align-items: center;
        gap: 12rpx;

        .priority-badge {
          width: 12rpx;
          height: 12rpx;
          border-radius: 50%;

          &.urgent {
            background: #ff4d4f;
          }

          &.high {
            background: #faad14;
          }

          &.medium {
            background: #1890ff;
          }

          &.low {
            background: #52c41a;
          }
        }

        .priority-text {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
        }
      }
    }
  }
}

// 设备信息卡片
.device-info-card {
  .device-details {
    .device-name {
      display: flex;
      align-items: center;
      gap: 12rpx;
      margin-bottom: 16rpx;

      .device-icon {
        font-size: 32rpx;
      }

      .name {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
      }
    }

    .device-location {
      display: flex;
      align-items: center;
      gap: 12rpx;
      padding: 16rpx;
      background: #f8f9fa;
      border-radius: 12rpx;

      .location-icon {
        font-size: 28rpx;
      }

      .location {
        font-size: 28rpx;
        color: #666;
      }
    }
  }
}

// 问题描述卡片
.description-card {
  .description-text {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
  }
}

// 日常检查卡片
.inspection-card {
  .inspection-actions {
    .action-btn {
      padding: 12rpx 24rpx;
      background: linear-gradient(135deg, #52c41a, #73d13d);
      color: #ffffff;
      border-radius: 20rpx;
      font-size: 26rpx;
      font-weight: 500;
    }
  }

  .inspection-items {
    .inspection-item {
      padding: 24rpx;
      background: #f8f9fa;
      border-radius: 16rpx;
      margin-bottom: 16rpx;
      border-left: 8rpx solid #e8e8e8;

      &.completed {
        border-left-color: #52c41a;
        background: #f6ffed;
      }

      .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12rpx;

        .item-name {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
        }

        .item-status {
          width: 12rpx;
          height: 12rpx;
          border-radius: 50%;

          &.normal {
            background: #52c41a;
          }

          &.warning {
            background: #faad14;
          }

          &.error {
            background: #ff4d4f;
          }

          &.pending {
            background: #ccc;
          }
        }
      }

      .item-desc {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 12rpx;
      }

      .item-result {
        padding: 16rpx;
        background: #ffffff;
        border-radius: 12rpx;
        margin-top: 12rpx;

        .result-text {
          display: block;
          font-size: 26rpx;
          color: #333;
          margin-bottom: 8rpx;
        }

        .result-note {
          display: block;
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }

  .inspection-summary {
    margin-top: 24rpx;
    padding: 24rpx;
    background: #f8f9fa;
    border-radius: 16rpx;

    .summary-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;

      .summary-title {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
      }

      .summary-time {
        font-size: 24rpx;
        color: #999;
      }
    }

    .summary-stats {
      display: flex;
      justify-content: space-around;
      margin-bottom: 16rpx;

      .stat-item {
        text-align: center;

        .stat-label {
          font-size: 24rpx;
          color: #666;
          display: block;
          margin-bottom: 4rpx;
        }

        .stat-value {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;

          &.normal {
            color: #52c41a;
          }

          &.abnormal {
            color: #ff4d4f;
          }
        }
      }
    }

    .issues-list {
      margin-top: 16rpx;

      .issues-title {
        font-size: 26rpx;
        color: #333;
        font-weight: 500;
        margin-bottom: 12rpx;
        display: block;
      }

      .issue-item {
        padding: 8rpx 0;

        .issue-text {
          font-size: 26rpx;
          color: #666;
        }
      }
    }
  }
}

// 处理记录卡片
.process-card {
  .process-timeline {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 16rpx;
      top: 0;
      bottom: 0;
      width: 2rpx;
      background: #e8e8e8;
    }

    .timeline-item {
      display: flex;
      gap: 24rpx;
      margin-bottom: 24rpx;
      position: relative;

      &:last-child {
        margin-bottom: 0;
      }

      &.active .timeline-dot {
        background: #52c41a;
        box-shadow: 0 0 8rpx rgba(82, 196, 26, 0.5);
      }

      .timeline-dot {
        width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
        background: #e8e8e8;
        flex-shrink: 0;
        margin-top: 4rpx;
      }

      .timeline-content {
        flex: 1;
        background: #f8f9fa;
        border-radius: 12rpx;
        padding: 20rpx;

        .record-time {
          display: block;
          font-size: 24rpx;
          color: #999;
          margin-bottom: 8rpx;
        }

        .record-action {
          display: block;
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
          margin-bottom: 8rpx;
        }

        .record-operator,
        .record-notes {
          display: block;
          font-size: 24rpx;
          color: #666;
          margin-top: 4rpx;
        }
      }
    }
  }
}

// 操作按钮
.action-buttons {
  display: flex;
  gap: 16rpx;
  margin-top: 24rpx;
  flex-wrap: wrap;

  .btn {
    flex: 1;
    min-width: 200rpx;
    height: 80rpx;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8rpx;
    font-size: 28rpx;
    font-weight: 500;
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.98);
    }

    .btn-icon {
      font-size: 28rpx;
    }

    &.btn-primary {
      background: linear-gradient(135deg, #52c41a, #73d13d);
      color: #ffffff;
      box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3);
    }

    &.btn-success {
      background: linear-gradient(135deg, #52c41a, #95de64);
      color: #ffffff;
      box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3);
    }

    &.btn-secondary {
      background: #ffffff;
      color: #52c41a;
      border: 2rpx solid #52c41a;
    }

    &.btn-warning {
      background: linear-gradient(135deg, #faad14, #ffc53d);
      color: #ffffff;
      box-shadow: 0 4rpx 12rpx rgba(250, 173, 20, 0.3);
    }
  }
}

// 处理详情卡片
.processing-detail-card {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

  .processing-info {
    margin-bottom: 24rpx;

    .info-row {
      display: flex;
      align-items: center;
      padding: 12rpx 0;

      .info-label {
        width: 160rpx;
        font-size: 28rpx;
        color: #666;
        font-weight: 500;
      }

      .info-value {
        flex: 1;
        font-size: 28rpx;
        color: #333;
      }
    }
  }

  .processing-description {
    margin-bottom: 24rpx;

    .description-title {
      display: block;
      font-size: 28rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 12rpx;
    }

    .description-content {
      display: block;
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
      padding: 16rpx;
      background: #f8f9fa;
      border-radius: 12rpx;
    }
  }

  .processing-photos {
    margin-bottom: 24rpx;

    .photos-title {
      display: block;
      font-size: 28rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 16rpx;
    }

    .photos-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12rpx;

      .photo-item {
        aspect-ratio: 1;
        border-radius: 12rpx;
        overflow: hidden;
        background: #f0f0f0;

        .photo-preview {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }

  .additional-info {
    margin-bottom: 16rpx;

    .info-title {
      display: block;
      font-size: 28rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 8rpx;
    }

    .info-content {
      display: block;
      font-size: 26rpx;
      color: #666;
      padding: 12rpx;
      background: #f8f9fa;
      border-radius: 8rpx;
    }
  }
}

// 客户评价卡片
.client-review-card {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid #f0f0f0;

    .card-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    .rating-score {
      font-size: 28rpx;
      color: #faad14;
      font-weight: bold;
    }
  }

  .no-reviews {
    text-align: center;
    padding: 48rpx 0;

    .no-reviews-text {
      display: block;
      font-size: 28rpx;
      color: #999;
      margin-bottom: 32rpx;
    }
  }

  .reviews-list {
    .review-item {
      padding: 24rpx 0;
      border-bottom: 1rpx solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .review-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;

        .reviewer-info {
          .reviewer-name {
            display: block;
            font-size: 28rpx;
            font-weight: 500;
            color: #333;
            margin-bottom: 4rpx;
          }

          .review-time {
            font-size: 24rpx;
            color: #999;
          }
        }

        .review-rating {
          display: flex;
          gap: 4rpx;

          .star {
            font-size: 24rpx;
            color: #e8e8e8;

            &.filled {
              color: #faad14;
            }
          }
        }
      }

      .review-comment {
        display: block;
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
        margin-bottom: 16rpx;
      }

      .review-photos {
        display: flex;
        gap: 12rpx;
        flex-wrap: wrap;

        .review-photo-item {
          width: 120rpx;
          height: 120rpx;
          border-radius: 8rpx;
          overflow: hidden;
          background: #f0f0f0;

          .review-photo {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }

    .add-review-section {
      margin-top: 24rpx;
      text-align: center;
    }
  }
}
</style>
